<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>日期提示</title>
    <style>
      /* 
时间 div
 */
      .top_div .data-now {
        position: relative;
        float: left;
        font-size: 12px;
        text-align: center;
        width: 130px;
        height: 70px;
        overflow: hidden;
        border-radius: 10px;
        /* border: 1px solid gray; */
        z-index: -1;
      }

      /* 具体时间 */
      .data-gl {
        position: absolute;
        top: 10px;
        /* border: 1px solid gray; */
        /* border-radius: 10px; */
        width: 100%;
        height: 100%;
      }

      /* 
时间动画效果
 */
      .data-now svg {
        width: 100%;
        height: 100%;
      }

      .data-now svg #circle {
        width: 100%;
        height: 100%;
        background-color: #21a0ff;
        fill: none;
        stroke-width: 10;
        /* stroke: #000; */
        transform: translate(-1px, -1px);
        stroke-dasharray: 400;
        stroke-dashoffset: 400;
        transition: all 0.5s;
      }

      .data-now svg #circle:nth-child(1) {
        stroke-dashoffset: 0;
        stroke: #f3f3f3;
      }

      .data-now svg #circle:nth-child(2) {
        stroke-dashoffset: calc(400 - 400 * (5 / 100));
        stroke: #21a0ff;
      }

      #Tis {
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- 时间 -->
    <div class="top_div">
      <div class="data-now" id="percent">
        <svg>
          <rect
            width="130"
            height="70"
            fill="white"
            style="border-radius: 10px"
          />

          <rect
            x="1"
            y="1"
            id="circle"
            width="130"
            height="70"
            fill="white"
            style="border-radius: 10px"
          />
        </svg>

        <div class="data-gl">
          <div id="data_now1">时间</div>
          <div id="data_now2">时间</div>
          <div id="Tis">提示</div>
        </div>
      </div>
    </div>

    <script>
      let TiShi = "辛苦了，请注意休息！";
      let TiShi1 = "努力工作中";

      let now = "";
      let year = "";
      let month = "";
      let day = "";
      let hours = "";
      let minutes = "";
      let seconds = "";
      let week = "";
      let startTime = "";
      let endTime = "";
      let weekdays = [
        "星期天",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let data = "";

      setInterval(function () {
        //自定义时间
        // console.log("weekSum=",localStorage.getItem("weekSum"))
        now = new Date();
        year = now.getFullYear(); // 获取年份
        month = now.getMonth() + 1; // 获取月份（注意：月份从0开始，所以需要加1）
        day = now.getDate(); // 获取日期
        hours = now.getHours(); // 获取小时
        minutes = now.getMinutes(); // 获取分钟
        seconds = now.getSeconds(); // 获取秒数
        week = now.getDay(); // 获取星期几
        startTime = new Date(); //  创建一个开始时间的新对象
        startTime.setHours(8, 30, 0); // 将开始时间设置为早上八点半
        endTime = new Date(); //  创建一个结束时间的新对象
        endTime.setHours(17, 30, 0); // 将结束时间设置为下午5点半

        // -------------------------------------
        data =
          year +
          "-" +
          month +
          "-" +
          day +
          " " +
          hours +
          ":" +
          minutes +
          ":" +
          seconds;
        // -------------------------------------
        //时间动画效果
        const circle = document.querySelector("#circle");
        // const timer = setInterval(() => {
        // percent += Math.ceil(Math.random() * 1)
        circle.style.strokeDashoffset = `calc(400 - 400 * (${seconds} / 60))`;

        // console.log(test_da);
        // localStorage.setItem("NotData_Me", test_da);

        //时间
        document.getElementById("data_now1").innerHTML = data;
        //星期
        // 如果浏览器缓存“weekSum” 和当前 星期不相等时
        if (localStorage.getItem("weekSum") != weekdays[week]) {
          // console.log("data_now1=")
          // 将当前系统星期  存入浏览器缓存中，
          localStorage.setItem("weekSum", weekdays[week]); // 优化显示    星期
          // 并将当前系统星期显示给  ‘data_now1’
          document.getElementById("data_now2").innerHTML = weekdays[week];
        }
        // 将浏览器缓存中 ‘weekSum’ 的值 显示出来
        document.getElementById("data_now2").innerHTML =
          localStorage.getItem("weekSum");

        // 当 不是星期天和星期六，并且时间大于早上8点半 且 小于下午 5点半时
        if (week != 0 && week != 6 && now >= startTime && now <= endTime) {
          //work = 0
          //   将 浏览器 "work" 的值设置为0
          localStorage.setItem("work", 0);
          // 并显示
          document.getElementById("Tis").textContent = TiShi1;
        } else {
          //work = 1
          localStorage.setItem("work", 1);
          document.getElementById("Tis").textContent = TiShi;
        }
      }, 1000);
    </script>
  </body>
</html>
